<template>
    <div id="app-box">
        <img :style="{zIndex:isEggModal?999:1}" class="bg-img" src="static/image/bg.png">
        <!-- 彩蛋 -->
        <div v-if="isEggModal" class="quan-egg" :style="{zIndex:1000}">
            <img src="static/image/prize-caidan-fuceng.png" alt="">
            <p>{{eggText}}</p>
            <span @click="isEggModal=false" class="egg-btn">知道了</span>
        </div>
        <!-- 领取奖励 -->
        <div class="quan-box" v-if="isprize&& query.height<200">
            <!-- 50劵 -->
            <img class="prize-quan50" src="static/image/prize-mi000.png">
            <span class="text">{{query.height}}</span>
            <span v-if="!isReceive20" @click="Receive(1)" class="prize-btn">领取</span>
            <img v-if="isReceive20" src="static/image/be-on-receive-btn.png" class="prize-btn be-on-prize">
            <span @click="resetGame" class="reset-game">再来一局</span>
            <span @click="rankingGame" class="ranking-game">查看排名</span>
        </div>
        <div class="quan-box" v-if="isprize&& query.height>=200 && query.height<300">
            <!-- 50劵 -->
            <img class="prize-quan50" src="static/image/prize-mi200.png">
            <span class="text">{{query.height}}</span>
            <span v-if="!isReceive" @click="Receive(3)" class="prize-btn prize-btn-yu">领取</span>
            <span v-if="!isReceive20" @click="Receive(1)" class="prize-btn prize-btn-20">领取</span>
            <img v-if="isReceive" src="static/image/be-on-receive-btn.png" class="prize-btn prize-btn-yu be-on-prize">
            <img v-if="isReceive20" src="static/image/be-on-receive-btn.png" class="prize-btn prize-btn-20 be-on-prize">
            <span @click="resetGame" class="reset-game">再来一局</span>
            <span @click="rankingGame" class="ranking-game">查看排名</span>
        </div>
        <div class="quan-box" v-if="isprize&& query.height>=300 && query.height<1200">
            <!-- 50劵 -->
            <img class="prize-quan50" src="static/image/prize-mi300.png">
            <span class="text" :style="{top:'31.5%',fontSize:'26px'}">{{query.height}}</span>
            <span v-if="!isReceive" :style="{bottom:'43%'}" @click="Receive(4)" class="prize-btn prize-btn-yu">领取</span>
            <span v-if="!isReceive20" :style="{bottom:'35%'}" @click="Receive(1)" class="prize-btn prize-btn-20">领取</span>
            <img v-if="isReceive" src="static/image/be-on-receive-btn.png" class="prize-btn prize-btn-300 be-on-prize">
            <img v-if="isReceive20" src="static/image/be-on-receive-btn.png" class="prize-btn prize-btn-300-20 be-on-prize">
            <img @click="getEgg" :style="{opacity:isReceivefl?1:0}" src="static/image/be-on-receive-btn.png" class="prize-btn prize-btn-300-fl be-on-prize">
            <span @click="resetGame" class="reset-game">再来一局</span>
            <span @click="rankingGame" class="ranking-game">查看排名</span>
        </div>
        <div class="quan-box" v-if="isprize&& query.height>=1200 && query.height <1500">
            <!-- 50劵 -->
            <img class="prize-quan50" src="static/image/prize-mi1200.png">
            <span class="text text1300" :style="{top:'35%'}">{{query.height}}</span>
            <span v-if="!isReceive" @click="Receive(5)" class="prize-btn prize-btn-yu">领取</span>
            <span v-if="!isReceive20" @click="Receive(1)" class="prize-btn prize-btn-20">领取</span>
            <img v-if="isReceive" src="static/image/be-on-receive-btn.png" class="prize-btn prize-btn-1200 be-on-prize">
            <img v-if="isReceive20" src="static/image/be-on-receive-btn.png" class="prize-btn prize-btn-1200-20 be-on-prize">
            <span @click="resetGame" class="reset-game">再来一局</span>
            <span @click="rankingGame" class="ranking-game">查看排名</span>
        </div>
        <div class="quan-box" v-if="isprize&& query.height>=1500">
            <!-- 50劵 -->
            <img class="prize-quan50" src="static/image/prize-mi1500.png">
            <span class="text text1300" :style="{top:'35.5%'}">{{query.height}}</span>
            <span v-if="!isReceive" @click="Receive(6)" class="prize-btn prize-btn-yu">领取</span>
            <span v-if="!isReceive20" @click="Receive(1)" class="prize-btn prize-btn-20">领取</span>
            <img v-if="isReceive" src="static/image/be-on-receive-btn.png" class="prize-btn prize-btn-1500 be-on-prize">
            <img v-if="isReceive20" src="static/image/be-on-receive-btn.png" class="prize-btn prize-btn-1500-20 be-on-prize">
            <span @click="resetGame" class="reset-game">再来一局</span>
            <span @click="rankingGame" class="ranking-game">查看排名</span>
        </div>
        <div class="prize-form-box" v-if="isForm">
            <!-- 50劵 -->
            <img class="prize-form prize-quan50" src="static/image/prize-write-data.png">
            <div class="from-wrap">
                <input v-model="params.name" class="input input-name" type="text">
                <input v-model="params.tel" class="input input-phone" type="text">
                <textarea v-model="params.address" maxlength="30" row="4" class="input input-address" type="text">
                </textarea>
                <span class="btn">
                    <span @click="submit" class="btn-sbumit"></span>
                </span>
            </div>
        </div>
        <!--  -->
    </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      query: {},
      isprize: false,
      isForm: false,
      type: null,
      isReceive: false, //是否领取
      isReceive20: false, //20是否领取
      isReceivefl: false, //福利是否领取
      isEggModal: false,
      eggText: "",
      params: {
        name: "",
        tel: "",
        address: ""
      }
    };
  },
  created() {
    this.initParams();
    this.init();
    // this.initReceive();
  },
  methods: {
    init() {
      let { type } = this.query;
      //领取奖励
      if (type == "receive") {
        this.isprize = true;
      }
      //三次机会用完
      if (type == "exhaust") {
        this.isprize = true;
      }
      //通关
      if (type == "clearance") {
        this.isprize = true;
      }
    },
    initParams() {
      this.query = this.URLObject();
    },
    resetGame() {
      window.location.href = "web-mobile/index.html";
    },
    rankingGame() {
      window.location.href = "ranking.html";
    },
    async initReceive() {
      const LIST_CARD = "http://h5.macocn.com/tilapia/api/myPrize";
      let { height } = this.query;
      let url = "";
      let ids = [];
      height = +height;
      if (height < 200) ids = [1];
      else if (height >= 200 && height < 300) ids = [1, 3];
      else if (height >= 300 && height < 1200) ids = [1, 4];
      else if (height >= 1200 && height < 1500) ids = [1, 5];
      else if (height >= 1500) ids = [1, 6];
      let { data } = await axios.get(LIST_CARD);
      let { code, data: row = [], msg } = data;
      if (code == 1 && row.length) {
        //25元 prize_id =2  is_get 0 未领取  1已领取
        for (let i = 0; i < row.length; i++) {
          let item = row[i];
          //目标
          if (ids.indexOf(+item.prize_id) && item.is_get == 1) {
            if (item.prize_id == 1) {
              this.isReceive20 = true;
            } else {
              this.isReceive = true;
            }
          }
        }
      }
    },
    Receive(type) {
      if (type == 5 || type == 6) {
        this.isprize = false;
        this.isForm = true;
        this.type = type;
      } else {
        this.addCard(type);
      }
    },
    async addCard(prize_id) {
      let _this = this;

      const CARD_ID = {
        1: "p8-68jjC9BMoDnNEvHZDwBl3JH54", //20元罗非鱼套餐立减
        3: "p8-68ji9W1NOiE78jsZ6kcbnhGlU", //罗非鱼买一送一
        4: "p8-68jk3EpF1aGz23IlNzvuwqMOI" //50元午餐券(工作日)
      }[prize_id];

      const GET_CARD = `http://h5.macocn.com/tilapia/jssdk/wx_card_ext?card_id=${CARD_ID}`;
      const LIST_CARD = "http://h5.macocn.com/tilapia/api/myPrize";
      const ADD_CARD = "http://h5.macocn.com/tilapia/api/receiveCallback";

      //获取卡券接口
      let { data } = await axios.get(GET_CARD);

      let cardExt = {
        timestamp: data.card_ext.timestamp,
        signature: data.card_ext.signature
      };

      wx.addCard({
        cardList: [
          {
            cardId: data.card_id,
            cardExt: JSON.stringify(cardExt)
          }
        ], // 需要添加的卡券列表
        async success(res) {
          let { data } = await axios.get(LIST_CARD);
          let { code, data: row = [], msg } = data;
          if (code == 1 && row.length) {
            //25元 prize_id =2  is_get 0 未领取  1已领取
            for (let i = 0; i < row.length; i++) {
              let item = row[i];
              //目标
              if (item.prize_id == prize_id) {
                //==0
                if (item.is_get == 0) {
                  let { data: pdata = {} } = await axios({
                    url: ADD_CARD,
                    params: {
                      id: item.id
                    }
                  });
                } else {
                  if (prize_id == 1) {
                    _this.isReceive20 = true;
                  } else {
                    _this.isReceive = true;
                  }
                }
              }
            }
            Toast("领取成功");
            if (prize_id == 1) {
              _this.isReceive20 = true;
            } else {
              _this.isReceive = true;
            }
          } else {
            Toast(msg);
          }
        }
      });
    },
    //领取彩蛋
    async getEgg() {
      let isEGG = "http://h5.macocn.com/tilapia/api/isPickEggs";
      let getEgg = "http://h5.macocn.com/tilapia/api/pickEggs";
      let { data } = await axios.get(isEGG);
      if (data.code == 0) {
        let { data: pdata } = await axios.get(getEgg);
        if (pdata.code !== 2) {
          this.isReceivefl = true;
          this.isEggModal = true;
          this.eggText = pdata.data.code;
        } else {
          Toast(pdata.msg);
        }
      } else {
        Toast(data.msg);
      }
    },
    async submit() {
      if (!this.params.name) {
        return Toast("请输入姓名");
      }
      if (!this.params.tel) {
        return Toast("请输入电话");
      }
      if (!this.params.address) {
        return Toast("请输入地址");
      }
      this.getGive();
    },
    //填写地址领取
    async getGive() {
      let prize_id = this.type;
      const LIST_CARD = "http://h5.macocn.com/tilapia/api/myPrize";
      const ADD_PRIZE = "http://h5.macocn.com/tilapia/api/getPrize";
      //查看奖品列表
      //?openid=o8-68jmPqMHHlBg5Qmtk8Wq8DJfk
      let { data } = await axios.get(LIST_CARD);
      let { code, data: row = [], msg } = data;

      if (code == 1 && row.length) {
        for (let i = 0; i < row.length; i++) {
          let item = row[i];
          //目标
          if (item.prize_id == prize_id) {
            //==0
            if (item.is_get == 0) {
              let { data: pdata = {} } = await axios({
                url: ADD_PRIZE,
                params: {
                  ...this.params,
                  id: item.id
                }
              });
            } else {
              if (prize_id == 1) {
                this.isReceive20 = true;
              } else {
                this.isReceive = true;
              }
            }
          }
        }
        Toast("领取成功");
        this.isprize = true;
        this.isForm = false;
      } else {
        Toast(msg);
      }
    },
    URLObject(url) {
      url = url || window.location.search;
      var theRequest = {};
      var strs = "";
      if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = decodeURIComponent(
            strs[i].split("=")[1]
          );
        }
      }
      return theRequest;
    }
  }
};
</script>

<style>

</style>
